<script>
export default {
  components: {},
  data () {
    return {
      radio: 0,
      activeName: '1',
      tableData: [{
        version : 'HTTP 0.9',
        description: '该版本只允许 GET 方法，具有典型的无状态性，无协议头和状态码，支持纯文本'
      }, {
        version : 'HTTP 1.0',
        description: '增加了 HEAD 和 POST 方法，支持长连接、缓存和身份认证'
      }, {
        version : 'HTTP 1.1',
        description: '增加了 Keep-alive 机制和 PipeLining 流水线，新增了 OPTIONS、PUT、DELETE、TRACE、CONNECT 方法'
      }, {
        version : 'HTTP 2.0',
        description: '增加了多路复用、头部压缩、随时复位等功能'
      }],
      tableData2: [{
        method : 'GET',
        description: '请求获取 URL 资源'
      }, {
        method : 'POST',
        description: '执行操作，请求 URL 资源后附加新的数据'
      }, {
        method : 'HEAD',
        description: '只获取资源响应消息报头'
      }, {
        method : 'PUT',
        description: '请求服务器存储一个资源'
      },{
        method : 'DELETE',
        description: '请求服务器删除资源'
      },{
        method : 'TRACE',
        description: '请求服务器回送收到的信息'
      },{
        method : 'OPTIONS',
        description: '查询服务器的支持选项'
      }],
      tableData3: [{
        messageHeader : 'Connection',
        description: '告知通信另一端，在完成HTTP传输后是关闭 TCP 连接，还是保持连接开放',
        note: void 0
      }, {
        messageHeader : 'Content-Encoding',
        description: '规定消息主体内容的编码形式',
        note: void 0
      }, {
        messageHeader : 'Content-Length',
        description: '规定消息主体的字节长度',
        note: void 0
      }, {
        messageHeader : 'Content-Type',
        description: '规定消息主体的内容类型',
        note: void 0
      },{
        messageHeader : 'Accept',
        description: '告知服务器客户端愿意接受的内容类型',
        note: '请求'
      },{
        messageHeader : 'Accept-Encoding',
        description: '告知服务器客户端愿意接受的内容编码',
        note: '请求'
      },{
        messageHeader : 'Authorization',
        description: '进行内置 HTTP 身份验证',
        note: '请求'
      },{
        messageHeader : 'Cookie',
        description: '用于向服务器提交 cookie',
        note: '请求'
      },{
        messageHeader : 'Host',
        description: '指定所请求的完整 URL 中的主机名称',
        note: '请求'
      },{
        messageHeader : 'Oringin',
        description: '跨域请求中的请求域',
        note: '请求'
      },{
        messageHeader : 'Referer',
        description: '指定提出当前请求的原始 URL',
        note: '请求'
      },{
        messageHeader : 'User-Agent',
        description: '提供浏览器或者客户端软件的有关信息',
        note: '请求'
      },{
        messageHeader : 'Cache-Control',
        description: '向浏览器发送缓存指令',
        note: '请求'
      },{
        messageHeader : 'Location',
        description: '重定向响应',
        note: '请求'
      },{
        messageHeader : 'Server',
        description: '提供所使用的服务器软件信息',
        note: '请求'
      },{
        messageHeader : 'Set-Cookie',
        description: '向浏览器发布 cookie',
        note: '请求'
      },{
        messageHeader : 'WWW-Authenticate',
        description: '提供服务器支持的验证信息',
        note: '请求'
      }],
      tableData4: [{
        code : 100,
        phrases: 'Continue',
        description: '服务端已收到请求并要求客户端继续发送主体'
      },{
        code : 200,
        phrases: 'Ok',
        description: '已成功提交，且响应主体中包含请求结果'
      },{
        code : 201,
        phrases: 'Created',
        description: 'PUT 请求方法的返回状态，请求成功提交'
      },{
        code : 301,
        phrases: 'Moved Permanently',
        description: '请求永久重定向'
      },{
        code : 302,
        phrases: 'Found',
        description: '暂时重定向'
      },{
        code : 304,
        phrases: 'Not Modified',
        description: '指示浏览器使用缓存中的资源副本'
      },{
        code : 400,
        phrases: 'Bad Request',
        description: '客户端提交请求无效'
      },{
        code : 401,
        phrases: 'Unauthorized',
        description: '服务端要求身份验证'
      },{
        code : 403,
        phrases: 'Forbidden',
        description: '禁止访问被请求资源'
      },{
        code : 404,
        phrases: 'Not Found',
        description: '所请求的资源不存在'
      },{
        code : 405,
        phrases: 'Method Not Allowed',
        description: '请求方法不支持'
      },{
        code : 413,
        phrases: 'Request Entity Too Large',
        description: '请求主体过长'
      },{
        code : 414,
        phrases: 'Request URI Too Long',
        description: '请求URL过长'
      },{
        code : 500,
        phrases: 'Internal Server Error',
        description: '服务器执行请求时遇到错误'
      },{
        code : 503,
        phrases: 'Service Unavailable',
        description: 'Web 服务器正常，但请求无法被响应'
      }],
    };
  },
  computed: {
    isButtonDisabled() {
      return this.radio === 0;
    }
  },
  methods: {
    check(radio) {
      console.log(radio)
      if (radio === 3) {
        this.$message.success('恭喜你，答对啦！')
      } else {
        this.$message.error('很遗憾，答错啦！')
      }
    },
  }
}
</script>

<template>
  <div>
    <h1 align="center">1.3 Web安全基础</h1>
    <el-divider></el-divider>
    <h3>1.3.1 HTML基础</h3>
    <b>什么是 HTML</b><br>
    HTML 是用来描述网页的一种语言。
    <ul>
      <li style="margin-left: 2em;">HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
      <li style="margin-left: 2em;">HTML 不是一种编程语言，而是一种标记语言 (Markup language)</li>
      <li style="margin-left: 2em;">标记语言是一套标记标签 (Markup tag)</li>
      <li style="margin-left: 2em;">HTML 使用标记标签来描述网页</li>
    </ul>
    总的来说，HTML 本身不具有编程逻辑，它是一种将格式与内容分离编排的语言。<br>
    用户在浏览器端解析的网页大都是由 HTML 语言组成。<br>
    由于是通过浏览器动态解析，因此可以使用普通文本编辑器来编写 HTML。

    <br><b>HTML 中的标签与元素</b><br>
    标签和元素共同构成了 HTML 多样的格式和丰富的功能。<br>
    HTML 元素以开始标签起始，以结束标签终止。元素处于开始标签与结束标签之间，标签之间可以嵌套，一个典型的 HTML 文档如下：
    <pre style="margin-left: 2em;"><i class="fa fa-copy"></i><ol class="linenums"><li class="L0"><code class="lang-html hljs xml"><span class="tag"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span></span></code></li><li class="L1"><code class="lang-html hljs xml"><span class="com"><span class="hljs-comment">&lt;!-- html文档申明标签 --&gt;</span></span></code></li><li class="L2"><code class="lang-html hljs xml"><span class="pln">    </span><span class="tag"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></span></code></li><li class="L3"><code class="lang-html hljs xml"><span class="pln">    </span><span class="com"><span class="hljs-comment">&lt;!-- html文档主体 --&gt;</span></span></code></li><li class="L4"><code class="lang-html hljs xml"><span class="pln">        Hello World</span></code></li><li class="L5"><code class="lang-html hljs xml"><span class="pln">        </span><span class="com"><span class="hljs-comment">&lt;!-- 注释 --&gt;</span></span></code></li><li class="L6"><code class="lang-html hljs xml"><span class="pln">    </span><span class="tag"><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></span></code></li><li class="L7"><code class="lang-html hljs xml"><span class="tag"><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></li></ol></pre>
    <b>信息隐藏</b><br>
    HTML 中的部分标签用于元信息展示、注释等功能，并不用于内容的显示。另一方面，一些属性具有修改浏览器显示样式的功能，在 CTF 中常被用来进行信息隐藏。
    <b>XSS</b><br>
    关于 XSS 漏洞的详细介绍见 1.4.5 节的 OWASP Top Ten Project 漏洞基础。导致 XSS 漏洞的原因是嵌入在 HTML 中的其它动态语言，但是 HTML 为恶意注入提供了输入口。<br>
    常见与 XSS 相关的标签或属性如下：<br>
    <pre style="margin-left: 2em;"><i class="fa fa-copy"></i><ol class="linenums"><li class="L0"><code class="lang-text"><span class="tag">&lt;script&gt;</span><span class="pln">，定义客户端脚本</span></code></li><li class="L1"><code class="lang-text"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="tag">=&gt;</span><span class="pln">，规定显示图像的 URL</span></code></li><li class="L2"><code class="lang-text"><span class="tag">&lt;body</span><span class="pln"> </span><span class="atn">background</span><span class="tag">=&gt;</span><span class="pln">，规定文档背景图像URL</span></code></li><li class="L3"><code class="lang-text"><span class="tag">&lt;body</span><span class="pln"> </span><span class="atn">onload</span><span class="tag">=&gt;</span><span class="pln">，body标签的事件属性</span></code></li><li class="L4"><code class="lang-text"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">onfocus</span><span class="pun">=</span><span class="pln"> autofocus</span><span class="tag">&gt;</span><span class="pln">，form表单的事件属性</span></code></li><li class="L5"><code class="lang-text"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">onclick</span><span class="tag">=&gt;</span><span class="pln">，击键的事件属性</span></code></li><li class="L6"><code class="lang-text"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="tag">=&gt;</span><span class="pln">，定义外部资源链接</span></code></li><li class="L7"><code class="lang-text"><span class="tag">&lt;object</span><span class="pln"> </span><span class="atn">data</span><span class="tag">=&gt;</span><span class="pln">，定义引用对象数据的 URL</span></code></li><li class="L8"><code class="lang-text"><span class="tag">&lt;svg</span><span class="pln"> </span><span class="atn">onload</span><span class="tag">=&gt;</span><span class="pln">，定义SVG资源引用</span></code></li></ol></pre>
    <b>HTML5 新特性</b><br>
    其实 HTML5 已经不新了，之所以还会在这里提到 HTML5，是因为更强大的功能会带来更多意想不到的问题。
    <br>HTML5 的一些新特性：<br>
    <ul>
      <li style="margin-left: 2em;">新的语义元素标签</li>
      <li style="margin-left: 2em;">新的表单控件</li>
      <li style="margin-left: 2em;">强大的图像支持</li>
      <li style="margin-left: 2em;">强大的多媒体支持</li>
      <li style="margin-left: 2em;">强大的 API</li>
    </ul>
    <el-divider></el-divider>

    <h3>1.3.2 HTTP 协议基础</h3>
    <b>什么是 HTTP</b><br>
    HTTP 是 Web 领域的核心通信协议。最初的 HTTP 支持基于文本的静态资源获取，随着协议版本的不断迭代，它已经支持如今常见的复杂分布式应用程序。
    <br>
    HTTP 使用一种基于消息的模型，建立于 TCP 层之上。由客户端发送一条请求消息，而后由服务器返回一条响应消息。
    <b>HTTP 请求与响应</b><br>
    一次完整的请求或响应由消息头、一个空白行和消息主体构成。以下是一个典型的 HTTP 请求：<br>
    <pre style="margin-left: 2em;"><i class="fa fa-copy"></i><ol class="linenums"><li class="L0"><code class="lang-http"><span class="pln">GET </span><span class="pun">/</span><span class="pln"> HTTP</span><span class="pun">/</span><span class="lit">1.1</span></code></li><li class="L1"><code class="lang-http"><span class="typ">Host</span><span class="pun">:</span><span class="pln"> www</span><span class="pun">.</span><span class="pln">github</span><span class="pun">.</span><span class="pln">com</span></code></li><li class="L2"><code class="lang-http"><span class="typ">User</span><span class="pun">-</span><span class="typ">Agent</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Mozilla</span><span class="pun">/</span><span class="lit">5.0</span><span class="pln"> </span><span class="pun">(</span><span class="typ">Windows</span><span class="pln"> NT </span><span class="lit">10.0</span><span class="pun">;</span><span class="pln"> </span><span class="typ">Win64</span><span class="pun">;</span><span class="pln"> x64</span><span class="pun">;</span><span class="pln"> rv</span><span class="pun">:</span><span class="lit">52.0</span><span class="pun">)</span><span class="pln"> </span><span class="typ">Gecko</span><span class="pun">/</span><span class="lit">20100101</span><span class="pln"> </span><span class="typ">Firefox</span><span class="pun">/</span><span class="lit">52.0</span></code></li><li class="L3"><code class="lang-http"><span class="typ">Accept</span><span class="pun">:</span><span class="pln"> text</span><span class="pun">/</span><span class="pln">html</span><span class="pun">,</span><span class="pln">application</span><span class="pun">/</span><span class="pln">xhtml</span><span class="pun">+</span><span class="pln">xml</span><span class="pun">,</span><span class="pln">application</span><span class="pun">/</span><span class="pln">xml</span><span class="pun">;</span><span class="pln">q</span><span class="pun">=</span><span class="lit">0.9</span><span class="pun">,*</span><span class="com">/*;q=0.8</span></code></li><li class="L4"><code class="lang-http"><span class="com">Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3</span></code></li><li class="L5"><code class="lang-http"><span class="com">Accept-Encoding: gzip, deflate</span></code></li><li class="L6"><code class="lang-http"><span class="com">Upgrade-Insecure-Requests: 1</span></code></li><li class="L7"><code class="lang-http"><span class="com">Cookie: logged_in=yes;</span></code></li><li class="L8"><code class="lang-http"><span class="com">Connection: close</span></code></li></ol></pre>
    第一行分别是请求方法，请求的资源路径和使用的 HTTP 协议版本，第二至九行为消息头键值对。
    <br>
    以下是对上面请求的回应（并不一定和真实访问相同，这里只是做为示例）：
    <pre style="margin-left: 2em;"><i class="fa fa-copy"></i><ol class="linenums"><li class="L0"><code class="lang-http"><span class="pln">HTTP</span><span class="pun">/</span><span class="lit">1.1</span><span class="pln"> </span><span class="lit">200</span><span class="pln"> OK</span></code></li><li class="L1"><code class="lang-http"><span class="typ">Date</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Tue</span><span class="pun">,</span><span class="pln"> </span><span class="lit">26</span><span class="pln"> </span><span class="typ">Dec</span><span class="pln"> </span><span class="lit">2017</span><span class="pln"> </span><span class="lit">02</span><span class="pun">:</span><span class="lit">28</span><span class="pun">:</span><span class="lit">53</span><span class="pln"> GMT</span></code></li><li class="L2"><code class="lang-http"><span class="typ">Content</span><span class="pun">-</span><span class="typ">Type</span><span class="pun">:</span><span class="pln"> text</span><span class="pun">/</span><span class="pln">html</span><span class="pun">;</span><span class="pln"> charset</span><span class="pun">=</span><span class="pln">utf</span><span class="pun">-</span><span class="lit">8</span></code></li><li class="L3"><code class="lang-http"><span class="typ">Connection</span><span class="pun">:</span><span class="pln"> close</span></code></li><li class="L4"><code class="lang-http"><span class="typ">Server</span><span class="pun">:</span><span class="pln"> </span><span class="typ">GitHub</span><span class="pun">.</span><span class="pln">com</span></code></li><li class="L5"><code class="lang-http"><span class="typ">Status</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pln"> OK</span></code></li><li class="L6"><code class="lang-http"><span class="typ">Cache</span><span class="pun">-</span><span class="typ">Control</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">no</span><span class="pun">-</span><span class="pln">cache</span></code></li><li class="L7"><code class="lang-http"><span class="typ">Vary</span><span class="pun">:</span><span class="pln"> X</span><span class="pun">-</span><span class="pln">PJAX</span></code></li><li class="L8"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="pln">UA</span><span class="pun">-</span><span class="typ">Compatible</span><span class="pun">:</span><span class="pln"> IE</span><span class="pun">=</span><span class="typ">Edge</span><span class="pun">,</span><span class="pln">chrome</span><span class="pun">=</span><span class="lit">1</span></code></li><li class="L9"><code class="lang-http"><span class="typ">Set</span><span class="pun">-</span><span class="typ">Cookie</span><span class="pun">:</span><span class="pln"> user_session</span><span class="pun">=</span><span class="lit">37Q</span><span class="pun">;</span><span class="pln"> path</span><span class="pun">=/;</span></code></li><li class="L0"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="typ">Request</span><span class="pun">-</span><span class="typ">Id</span><span class="pun">:</span><span class="pln"> e341</span></code></li><li class="L1"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="typ">Runtime</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.538664</span></code></li><li class="L2"><code class="lang-http"><span class="typ">Content</span><span class="pun">-</span><span class="typ">Security</span><span class="pun">-</span><span class="typ">Policy</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">default</span><span class="pun">-</span><span class="pln">src </span><span class="str">'none'</span><span class="pun">;</span></code></li><li class="L3"><code class="lang-http"><span class="typ">Strict</span><span class="pun">-</span><span class="typ">Transport</span><span class="pun">-</span><span class="typ">Security</span><span class="pun">:</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">age</span><span class="pun">=</span><span class="lit">31536000</span><span class="pun">;</span><span class="pln"> includeSubdomains</span><span class="pun">;</span><span class="pln"> preload</span></code></li><li class="L4"><code class="lang-http"><span class="typ">Public</span><span class="pun">-</span><span class="typ">Key</span><span class="pun">-</span><span class="typ">Pins</span><span class="pun">:</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">age</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span></code></li><li class="L5"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="typ">Content</span><span class="pun">-</span><span class="typ">Type</span><span class="pun">-</span><span class="typ">Options</span><span class="pun">:</span><span class="pln"> nosniff</span></code></li><li class="L6"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="typ">Frame</span><span class="pun">-</span><span class="typ">Options</span><span class="pun">:</span><span class="pln"> deny</span></code></li><li class="L7"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="pln">XSS</span><span class="pun">-</span><span class="typ">Protection</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> mode</span><span class="pun">=</span><span class="pln">block</span></code></li><li class="L8"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="typ">Runtime</span><span class="pun">-</span><span class="pln">rack</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.547600</span></code></li><li class="L9"><code class="lang-http"><span class="typ">Vary</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Accept</span><span class="pun">-</span><span class="typ">Encoding</span></code></li><li class="L0"><code class="lang-http"><span class="pln">X</span><span class="pun">-</span><span class="typ">GitHub</span><span class="pun">-</span><span class="typ">Request</span><span class="pun">-</span><span class="typ">Id</span><span class="pun">:</span><span class="pln"> </span><span class="lit">7400</span></code></li><li class="L1"><code class="lang-http"><span class="typ">Content</span><span class="pun">-</span><span class="typ">Length</span><span class="pun">:</span><span class="pln"> </span><span class="lit">128504</span></code></li><li class="L2"><code class="lang-http"></code></li><li class="L3"><code class="lang-http"><span class="pun">&lt;!</span><span class="pln">DOCTYPE html</span><span class="pun">&gt;</span></code></li><li class="L4"><code class="lang-http"><span class="pun">......</span></code></li></ol></pre>
    第一行为协议版本、状态号和对应状态的信息，第二至二十二为返回头键值对，紧接着为一个空行和返回的内容实体。
    <br><b>HTTP 方法</b>
    在提到 HTTP 方法之前，我们需要先讨论一下 HTTP 版本问题。HTTP 协议现在共有三个大版本，版本差异会导致一些潜在的漏洞利用方式。
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="version"
          label="版本"
          width="180">
      </el-table-column>
      <el-table-column
          prop="description"
          label="简述">
      </el-table-column>
    </el-table>

    <el-table
        :data="tableData2"
        border
        style="width: 100%">
      <el-table-column
          prop="method"
          label="方法"
          width="180">
      </el-table-column>
      <el-table-column
          prop="description"
          label="描述">
      </el-table-column>
    </el-table>
    <b>URL</b><br>
    URL 是统一资源定位符，它代表了 Web 资源的唯一标识，如同电脑上的盘符路径。最常见的 URL 格式如下所示：
    <pre><i class="fa fa-copy"></i><ol class="linenums"><li class="L0"><code class="lang-text"><span class="pln">protocol</span><span class="pun">:</span><span class="com">//[user[:password]@]hostname[:post]/[path]/file[?param=value]</span></code></li><li class="L1"><code class="lang-text"><span class="pun">协议</span><span class="pln">   </span><span class="pun">分隔符</span><span class="pln">   </span><span class="pun">用户信息</span><span class="pln">        </span><span class="pun">域名</span><span class="pln">      </span><span class="pun">端口</span><span class="pln">   </span><span class="pun">路径</span><span class="pln">   </span><span class="pun">资源文件</span><span class="pln">   </span><span class="pun">参数键</span><span class="pln">   </span><span class="pun">参数值</span></code></li></ol></pre>
    <b>HTTP 消息头</b><br>
    HTTP 支持许多不同的消息头，一些有着特殊作用，而另一些则特定出现在请求或者响应中。
    <el-table
        :data="tableData3"
        border
        style="width: 100%">
      <el-table-column
          prop="messageHeader"
          label="消息头"
          width="180">
      </el-table-column>
      <el-table-column
          prop="description"
          label="描述">
      </el-table-column>
      <el-table-column
          prop="note"
          label="备注">
      </el-table-column>
    </el-table>
    <b>Cookie</b><br>
    Cookie 是大多数 Web 应用程序所依赖的关键组成部分，它用来弥补 HTTP 的无状态记录的缺陷。服务器使用 Set-Cookie 发布 cookie，浏览器获取 cookie 后每次请求会在 Cookie 字段中包含 cookie 值。
    <br>
    Cookie 是一组键值对，另外还包括以下信息：
    <ul>
      <li style="margin-left: 2em;">expires，用于设定 cookie 的有效时间。</li>
      <li style="margin-left: 2em;">domain，用于指定 cookie 的有效域。</li>
      <li style="margin-left: 2em;">path，用于指定 cookie 的有效 URL 路径。</li>
      <li style="margin-left: 2em;">secure，指定仅在 HTTPS 中提交 cookie。</li>
      <li style="margin-left: 2em;">HttpOnly，指定无法通过客户端 JavaScript 直接访问 cookie。</li>
    </ul>

    <b>状态码</b><br>
    状态码表明资源的请求结果状态，由三位十进制数组成，第一位代表基本的类别：
    <ul>
      <li style="margin-left: 2em;">1xx，提供信息</li>
      <li style="margin-left: 2em;">2xx，请求成功提交</li>
      <li style="margin-left: 2em;">3xx，客户端重定向其他资源</li>
      <li style="margin-left: 2em;">4xx，请求包含错误</li>
      <li style="margin-left: 2em;">5xx，服务端执行遇到错误</li>
    </ul>
    常见的状态码及短语如下所示：
    <el-table
        :data="tableData4"
        border
        style="width: 100%">
      <el-table-column
          prop="code"
          label="状态码"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phrases"
          label="短语">
      </el-table-column>
      <el-table-column
          prop="description"
          label="描述">
      </el-table-column>
    </el-table>
    <el-table-column
        prop="description"
        label="描述">
    </el-table-column>
    <b>401 状态支持的 HTTP 身份认证：</b>
    <ul>
      <li style="margin-left: 2em;">Basic，以 Base64 编码的方式发送证书</li>
      <li style="margin-left: 2em;">NTLM，一种质询-响应机制</li>
      <li style="margin-left: 2em;">Digest，一种质询-响应机制，随同证书一起使用一个随机的 MD5 校验和</li>
    </ul>
    <b>HTTPS</b><br>
    HTTPS 用来弥补 HTTP 明文传输的缺陷。通过使用安全套接字 SSL，在端与端之间传输加密后的消息，保护传输数据的隐密性和完整性，并且原始的 HTTP 协议依然按照之前同样的方式运作，不需要改变。
    <h3>参考资料</h3>
    <ul>
      <li style="margin-left: 2em;"><a href="https://en.wikipedia.org/wiki/URL" target="_blank">URL</a></li>
      <li style="margin-left: 2em;"><a href="https://www.cnblogs.com/andashu/p/6441271.html" target="_blank">HTTP 协议版本对比</a></li>
      <li style="margin-left: 2em;">《黑客攻防技术宝典——Web 实战篇》</li>
    </ul>
    <el-divider></el-divider>

    <div class="bottom-container">
      <h3>下面哪个选项不是HTTP方法？</h3>
      <el-radio-group v-model="radio">
        <el-radio :label="1">GET</el-radio>
        <el-radio :label="2">POST</el-radio>
        <el-radio :label="3">UPDATE</el-radio>
        <el-radio :label="4">DELETE</el-radio>
        <el-button type="primary" plain :disabled="isButtonDisabled" @click="check(radio)">检查</el-button>
      </el-radio-group>
    </div>
    <el-divider></el-divider>

  </div>
</template>

<style scoped>

</style>